<template>
    <div id="pieEchart" style="height: 40vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
    name: "pieEchart",
    data() {
        return {
            chart: null,
            options: {},
            max: "", //最大value值
            min: "", // 最小value值
            type: 0
        };
    },
    props: {
        listData: {
            type: Array,
            default: () => []
        },
        id: {
            type: String,
            default: ""
        }
    },
    watch: {
        listData: {
            handler(val, newVal) {
                this.initOptions(val);
                this.initCharts();
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        // this.getData();
    },
    mounted() {
        //     setTimeout(() => {
        //   this.initOptions(this.listData);
        //   this.initCharts();
        // }, 1000)
        this.initOptions();
        this.initCharts();
    },
    methods: {
        initOptions() {
            this.options = {
                title: {
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '食品安全案件',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: '调查中' },
                            { value: 735, name: '已立案' },
                            { value: 580, name: '监察中' },
                            { value: 484, name: '取证中' },
                            { value: 300, name: '已结案' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

        },
        initCharts() {
            this.chart = echarts.init(document.getElementById("pieEchart"));
            this.chart.setOption(this.options, true);
        }
    }
};

</script>
  